<template>
  <div>
    <div class="header-container">
      <div class="left-content">
        <el-button
            @click="handleCollapse"
            icon="el-icon-menu"
            size="small"></el-button>
        <!--面包屑区域-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
              v-for="item in $store.state.tab.tabList"
              :key="item.path">
            <span @click="handleBreadCrumbClick(item)">
              {{ item.label }}
            </span>
          </el-breadcrumb-item>
        </el-breadcrumb>

      </div>
      <div class="right-content">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="user"
                 src="@/assets/动漫头像.jpeg"
                 alt="">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import {logout} from "@/api";

export default {
  name: "CommonHeader",
  methods: {
    handleCollapse() {
      this.$store.commit('collapseMenu')
    },
    handleBreadCrumbClick(item) {

      if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
        this.$router.push(item.path)
      }
    },
    //退出登录
    handleCommand(command){
      if (command==='personalCenter'){
        console.log('personal-info')
      }else if (command==='logout'){
        this.handleLogout()
      }

    },
    handleLogout(){

      logout().then(({data})=>{
        if(data.code===20000){
          //清除cookie中的token
          Cookie.remove('token')
          //清除cookie中的menuData
          Cookie.remove('menuData')
          //如果退出登录成功
          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style scoped
       lang="less">
.header-container {
  background-color: #eee;
  display: flex;
  height: 60px;
  justify-content: space-between;
  //纵轴垂直居中
  align-items: center;
  padding: 0 20px;


  .left-content {
    color: black;
    display: flex;
    align-items: center;

    .el-breadcrumb-item {
      color: white;
    }

    span {
      margin-left: 10px;
    }
  }

  .right-content {
    color: white;

    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 20px;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }
  }


}


</style>
